<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%
 	int pageIndex = request.getParameter("pageIndex") == null ? 1 : Integer.parseInt(request.getParameter("pageIndex"));
 %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$(function() {
			var searchText = "리복%20퓨리";
			var url = "http://shopping.naver.com/search/all_search.nhn?query="
						+ searchText 
						+ "&pagingIndex="
						+ <%=pageIndex%>
						+"&pagingSize=20&productSet=total&viewType=list&searchBy=none&sort=rel&frm=NVSCPRO";
			
			$('#testButton').click(function() {
				//alert('test');
				$.ajax(
						{
							url : "htmlMaker.jsp",
							dataType : "JSON",
							type : "GET",
							data : { "url" : url },
							crossDomain : true,
							success : function(data) { 
									$('#container').empty();

									var table = "<table border = '1'>";
										table += "<tr><td>이미지</td></tr>";
											$.each(data, function(index, entry) {
												table += "<tr>";
												table += "<td><a href='" + entry.linkUrl +"' target='_blank'><img src='" + entry.imageUrl + "'></a></td>";
												/* table += "<td><img src='" + entry.imageUrl + "'></td>"; */
												/* table += "<td>"+entry.linkUrl+"</td>"; */
												table += "</tr>";
											});
										table += "</table>";
										
										for(var i = 1; i < 6; i++){
											table += "<a href='NaverShopping.jsp?pageIndex=" + i + "'>" + i + "</a>";
											table += "&nbsp;&nbsp;&nbsp;"
										}
									console.log(table);
									$('#container').html(table);
								}
						}
				);
			});
		});
	</script>
</head>
<body>
	<input id="testButton" type="button" value="클릭">
	<div id="container">
		
	</div>
</body>
</html>